<!--主表-->
<template>
    <!-- 多重搜索 -->
    <!--  <MultipleSearch/>-->
    <div all-box style="width: 1400px;display: flex;justify-content:space-between ">
        <div style="display: flex;align-items: center;height: 80px;justify-content: space-evenly;
                                                                        width: 980px;border: 1px solid #eaebed;border-radius: 10px;
                                                                        margin-bottom: 20px;
                                                                         box-shadow: 10px 5px 5px #eaebed;">

            <el-input v-model="input" class="w-50" placeholder="审核类型" />

            <!--    时间-->
            <div class="block">
                <!--      <span class="demonstration">Default</span>-->
                <el-config-provider :locale="locale">
                    <el-date-picker v-model="value1" type="datetimerange" range-separator="到" start-placeholder="Start date"
                        end-placeholder="End date" format="YYYY-MM-DD" style="width: 200px;" />
                </el-config-provider>
            </div>
            <el-button style="background-color: #0099ff;color: white" @click="hh">筛选</el-button>
            <el-input v-model="input1" class="w-40" placeholder="请输入审批主题关键字" />
            <el-button type="primary" @click="ww">搜索</el-button>
        </div>
        <el-button
            style="width: 200px;height: 70px;border-radius: 15px;
                                                                          background: linear-gradient(#33a0cc, #33c3cc);color: white;font-size: 22px"
            @click="submitQue">

            新建审批
        </el-button>
    </div>
    <!--  table-->
    <el-table class="table-title1" stripe="true" border="true" :data="tableData" style="width: 1400px" max-height="600"
        :header-cell-style="{ background: '#80ccff', color: 'white' }">
        <el-table-column fixed prop="id" label="序号" width="150" align="center" />
        <el-table-column prop="theme" label="审批主题" width="220" align="center" />
        <el-table-column prop="type" label="审批类型" width="220" align="center" />
        <el-table-column prop="link" label="当前审批环节" width="120" align="center" />
        <el-table-column prop="updatetime" label="最近处理时间" width="240" align="center" />
        <el-table-column prop="state" label="审批状态" width="120" align="center" />
        <el-table-column prop="result" label="审批结果" width="120" align="center" />
        <el-table-column fixed="right" label="操作" width="210" align="center">
            <template #default="scope">

                <el-button link type="primary" size="small" @click.prevent="mysubmit(scope.$index, scope.row)">

                    提交
                </el-button>
                <el-button link type="primary" size="small" @click="edit(scope.row)">
                    编辑
                </el-button>
                <el-button link type="primary" size="small" @click.prevent="selectAll(scope.$index, scope.row)">
                    查看
                </el-button>
                <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <div style="margin-left: 20px;" id="pageall">
        <el-pagination :current-page="page.pageNum" :page-size="page.pageSize" :page-sizes="[2, 5, 10, 20]"
            layout="total, sizes, prev, pager, next, jumper" :total="totallenght" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
    <div>
        <el-dialog v-model="dialogFormVisible" title="编辑">
            <el-form :model="form">
                <div class="hw">
                    <!-- 1 -->
                    <el-form-item label="填报人职务" :label-width="formLabelWidth">
                        <el-input v-model="form.applygrude" autocomplete="off" class="ww" />
                    </el-form-item>
                    <!-- 2 -->
                    <el-form-item label="填报人姓名" :label-width="formLabelWidth">
                        <el-input v-model="form.applyname" autocomplete="off" class="ww" />
                    </el-form-item>
                </div>
                <div class="hw">
                    <!-- 3 -->
                    <el-form-item label="用地面积" :label-width="formLabelWidth">
                        <el-input v-model="form.area" autocomplete="off" class="ww" />
                    </el-form-item>
                    <!-- 4 -->
                    <el-form-item label="审批内容" :label-width="formLabelWidth">
                        <el-input v-model="form.body" autocomplete="off" class="ww" />
                    </el-form-item>
                </div>
                <div class="hw">
                    <!-- 5 -->
                    <el-form-item label="设计方向" :label-width="formLabelWidth">
                        <el-input v-model="form.designdirection" autocomplete="off" class="ww" />
                    </el-form-item>
                    <!-- 6 -->
                    <el-form-item label="设计技术" :label-width="formLabelWidth">
                        <el-input v-model="form.designt" autocomplete="off" class="ww" />
                    </el-form-item>
                </div>
                <div class="hw">
                    <!-- 7 -->
                    <el-form-item label="固定电话" :label-width="formLabelWidth">
                        <el-input v-model="form.fixphone" autocomplete="off" class="ww" />
                    </el-form-item>
                    <!-- 8 -->
                    <el-form-item label="负责人是否知晓" :label-width="formLabelWidth">
                        <el-input v-model="form.know" autocomplete="off" class="ww" />
                    </el-form-item>
                </div>
                <div class="hw">
                    <!-- 9 -->
                    <el-form-item label="企业意见" :label-width="formLabelWidth">
                        <el-input v-model="form.opinion" autocomplete="off" class="ww" />
                    </el-form-item>
                    <!-- 10 -->
                    <el-form-item label="填报人手机号" :label-width="formLabelWidth">
                        <el-input v-model="form.phone" autocomplete="off" class="ww" />
                    </el-form-item>
                </div>
                <div class="hw">
                    <!-- 11 -->
                    <el-form-item label="工程规划" :label-width="formLabelWidth">
                        <el-input v-model="form.plan" autocomplete="off" class="ww" />
                    </el-form-item>
                    <!-- 12 -->
                    <el-form-item label="项目规划" :label-width="formLabelWidth">
                        <el-input v-model="form.projecrplanning" autocomplete="off" class="ww" />
                    </el-form-item>
                </div>
                <div class="hw">
                    <!-- 13 -->
                    <el-form-item label="项目投资" :label-width="formLabelWidth">
                        <el-input v-model="form.projectinvestment" autocomplete="off" class="ww" />
                    </el-form-item>
                    <!-- 14 -->
                    <el-form-item label="项目名称" :label-width="formLabelWidth">
                        <el-input v-model="form.projectnume" autocomplete="off" class="ww" />
                    </el-form-item>
                </div>
                <div class="hw">
                    <!-- 15 -->
                    <el-form-item label="审批性质" :label-width="formLabelWidth">
                        <el-input v-model="form.property" autocomplete="off" class="ww" />
                    </el-form-item>
                    <!-- 16 -->
                    <el-form-item label="审批主题" :label-width="formLabelWidth">
                        <el-input v-model="form.theme" autocomplete="off" class="ww" />
                    </el-form-item>
                </div>
                <div class="hw">
                    <!-- 17 -->
                    <el-form-item label="工程时长" :label-width="formLabelWidth">
                        <el-input v-model="form.time" autocomplete="off" class="ww" />
                    </el-form-item>
                    <!-- 18 -->
                    <el-form-item label="用途" :label-width="formLabelWidth">
                        <el-input v-model="form.use1" autocomplete="off" class="ww" />
                    </el-form-item>
                </div>
                <div class="hw">
                    <!-- 19 -->
                    <el-form-item label="审批类型" :label-width="formLabelWidth">
                        <el-input v-model="form.type" autocomplete="off" class="ww" />
                    </el-form-item>
                    <!-- 20 -->
                    <el-form-item label="企业id" :label-width="formLabelWidth">
                        <el-input v-model="form.enterpriseId" autocomplete="off" class="ww" />
                    </el-form-item>
                </div>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="SubmitEdit">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
  
<script lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { useRoute } from "vue-router";
import { useRouter } from 'vue-router'
import znCh from 'element-plus/lib/locale/lang/zh-cn'
// import dayjs from 'dayjs'
import axios from "axios";
// import MultipleSearch from "@/components/Enterprise-problem management/MultipleSearch.vue";
// import component from "*.vue";
// import * as url from "url";
export default {
    name: "ApprovaChecklist",
    setup() {
        //总条数
        let totallenght = ref()

        let form: any = reactive({
            theme: '',
            applyname: "",
            applygrude: '',
            phone: '',
            fixphone: '',
            property: '',
            know: '',
            use1: '',
            area: '',
            projectnume: '',
            projecrplanning: "",
            projectinvestment: '',
            designdirection: '',
            designt: '',
            plan: '',
            opinion: '',
            time: '',
            body: "",
            type: '',
            enterpriseId: '',
            id: ''
        })
        const page:any = reactive({//配置对应的查询参数
            pageNum: 1,
            pageSize: 10,
        });

        let dialogFormVisible: any = ref(false)
        const formLabelWidth = '140px'
        const aaa = (aa: any) => {
            var date = new Date(aa); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '/';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
            var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
            var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
            var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
            var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
            return Y + M + D + h + m + s;

        }
        const bbb = (aa: any) => {
            var date = new Date(aa); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
            var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
            var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
            var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
            return Y + M + D + h + m + s;

        }
        const input = ref()
        const input1 = ref()
        // ------------------
        let submitQue = () => {
            router.push('/ApprovalType')
        }
        // ----------------路由配置
        const route = useRoute()
        const router = useRouter()
        // ---------------------时间框
        const value1 = ref<[Date, Date]>([
            new Date(2000, 10, 10),
            new Date(2000, 10, 11),
        ])
        const value2 = ref('')

        const shortcuts = [
            {
                text: 'Last week',
                value: () => {
                    const end = new Date()
                    const start = new Date()
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                    return [start, end]
                },
            },
            {
                text: 'Last month',
                value: () => {
                    const end = new Date()
                    const start = new Date()
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                    return [start, end]
                },
            },
            {
                text: 'Last 3 months',
                value: () => {
                    const end = new Date()
                    const start = new Date()
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                    return [start, end]
                },
            },
        ]

        const getList = () => {
            axios({
                url: 'http://1.14.73.59:8080/sp/allselect',
                method: 'post',
                params: {
                    currentPage: page.pageNum,
                    enterpriseid: 5,
                    pageSize: page.pageSize
                }
            }).then(resp => {
                console.log(resp)
                console.log(resp.data.conut)
                console.log(resp.data.data)
                tableData.value = resp.data.data
                totallenght.value=resp.data.conut
                // console.log(resp.data.data)
                for (let i = 0; i < tableData.value.length; i++) {
                    tableData.value[i].updatetime = aaa(tableData.value[i].updatetime)
                }

            });
        }

        const handleSizeChange = (val: number) => {
            page.pageSize = val
            console.log(val)
            getList()
        }
        const handleCurrentChange = (val: number) => {
            page.pageNum = val
            console.log(val)
            getList()
        }

        onMounted(() => {

            getList()
        })

        //筛选
        const hh = () => {
            if (input.value == undefined || input.value == '') {
                input.value = null
            }
            let a = JSON.parse(JSON.stringify(value1.value))
            let b0: any;
            let b1: any;
            if (a == null) {
                b0 = null,
                    b1 = null
            } else {
                b0 = bbb(new Date(a[0]));
                b1 = bbb(new Date(a[1]));
            }
            console.log('1111', input.value, b0, b1)
            // b0=bbb(new Date(a[0]))
            // b1=bbb(new Date(a[1]))
            // console.log('11111',bbb(new Date(a[0])))
            // console.log('11111',bbb(new Date(a[1])))
            // const enda = bbb(new Date(a[1]))
            // const sta = bbb(new Date(a[0]))

            axios({
                url: 'http://1.14.73.59:8080/sp/typeselect',
                method: 'post',
                params: {
                    currentPage: page.pageNum,
                    endtime: b1,
                    enterpriseid: 5,
                    pageSize: page.pageSize,
                    starttime: b0,
                    type: input.value
                }
            }).then(resp => {
                // console.log(resp.data.data)
                tableData.value = resp.data.data
                for (let i = 0; i < tableData.value.length; i++) {
                    tableData.value[i].updatetime = aaa(tableData.value[i].updatetime)
                }
            });

        }

        //搜索
        const ww = () => {
            console.log(input1.value)
            axios({
                url: 'http://1.14.73.59:8080/sp/nameselect',
                method: 'post',
                params: {
                    currentPage: page.pageNum,
                    enterpriseid: 5,
                    name: input1.value,
                    pageSize: page.pageSize,
                }
            }).then(resp => {
                console.log(resp.data.data)
                tableData.value = resp.data.data
                for (let i = 0; i < tableData.value.length; i++) {
                    tableData.value[i].updatetime = aaa(tableData.value[i].updatetime)
                }
            });
        }

        //提交
        const mysubmit: any = (index: any, row: any) => {
            axios({
                url: 'http://1.14.73.59:8080/sp/submit',
                method: 'post',
                params: {
                    enterpriseid: 5,
                    id: row.id
                }
            }).then(resp => {
                console.log(resp)
            });
        }

        //查看编辑
        const edit = (row: any) => {
            console.log(row)
            dialogFormVisible.value = true
            axios({
                url: 'http://1.14.73.59:8080/sp/spxx',
                method: 'post',
                params: {
                    id: row.id
                }
            }).then(resp => {
                console.log(resp.data.data)
                form.theme = resp.data.data.theme
                form.applyname = resp.data.data.applyname
                form.applygrude = resp.data.data.applygrude
                form.phone = resp.data.data.phone
                form.fixphone = resp.data.data.fixphone
                form.property = resp.data.data.property
                form.know = resp.data.data.know
                form.use1 = resp.data.data.use1
                form.area = resp.data.data.area
                form.projectnume = resp.data.data.projectnume
                form.projecrplanning = resp.data.data.projecrplanning
                form.projectinvestment = resp.data.data.projectinvestment
                form.designdirection = resp.data.data.designdirection
                form.designt = resp.data.data.designt
                form.plan = resp.data.data.plan
                form.opinion = resp.data.data.opinion
                form.time = resp.data.data.time
                form.body = resp.data.data.body
                form.type = resp.data.data.type
                form.enterpriseId = resp.data.data.enterpriseId
                form.id = resp.data.data.id
            });
        }
        //修改保存
        const SubmitEdit = () => {
            dialogFormVisible.value = false
            axios({
                url: 'http://1.14.73.59:8080/sp/update',
                method: 'post',
                data: {
                    "applygrude": form.applygrude,
                    "applyname": form.applyname,
                    "area": form.area,
                    "body": form.body,
                    "designdirection": form.designdirection,
                    "designt": form.designt,
                    "enterpriseId": form.enterpriseId,
                    "fixphone": form.fixphone,
                    "know": form.know,
                    "opinion": form.opinion,
                    "phone": form.phone,
                    "plan": form.plan,
                    "projecrplanning": form.projecrplanning,
                    "projectinvestment": form.projectinvestment,
                    "projectnume": form.projectnume,
                    "property": form.property,
                    "theme": form.theme,
                    "time": form.time,
                    "type": form.type,
                    "use1": form.use1,
                    id: form.id,
                }
            }).then(resp => {
                getList()
            });

        }

        let tableData: any = ref([])

        //删除
        const deleteRow = (row: any) => {
            axios({
                url: 'http://1.14.73.59:8080/sp/delete',
                method: 'post',
                params: {
                    id: row.id
                }
            }).then(resp => {
                getList()
            });

        }


        //查看
        const selectAll = (index: number, row: any) => {
            // console.log(1111)
            console.log(row)
            // router.push('/chakanApproval')
            router.push({ path: '/chakanApproval', query: { id: row.id, link: row.link } })

        }
        let Multipleselect = {
            type: '',
            pnature: ''
        }
        return {
            tableData,
            deleteRow, mysubmit, edit, dialogFormVisible, form, formLabelWidth,
            SubmitEdit, value1, value2, shortcuts, Multipleselect, submitQue,
            selectAll, input, getList, hh, input1, ww, locale: znCh, totallenght, handleSizeChange, handleCurrentChange,page
        }
    }
}

</script>
<style scoped>
.table-title1 {
    display: flex;
    justify-content: flex-start;

}

.el-table__inner-wrapper {
    border: none;
}

.el-input {
    width: 15%;
    height: 32px;
}

.w-50 {
    width: 200px;
}

.w-40 {
    width: 200px;
}

.ww {
    width: 200px;
}

.hw {
    width: 500px;
    display: flex;
}
</style>